<template>
  <div>
     <div>客户分类</div>
     <!-- 内容展示 -->
     <div>
      <el-table :data="seg" stripe style="width: 100%">
      <el-table-column prop="customerType" label="分类名称" width="600px" align="center"/>
      <el-table-column prop="rate" label="比列" width="200px" align="center"/>
      <el-table-column label="操作" align="center">
         <template #default="scope">
            <el-button type="primary" :icon="Edit" circle @click="edit(scope.row)" title="编辑"/>
         </template>
      </el-table-column>
  </el-table>
     </div>
<!-- 编辑对话框 -->
  <el-dialog
    v-model="dialogVisible"
    title="编辑"
    width="500"
  >
    <hr/>
    <!-- 身体 -->

     <el-form :model="segm" label-width="auto" style="max-width: 600px">
      <el-form-item style="margin-top:30px" label="分类名称">
        <el-input  v-model="segm.customerType" placeholder="请输入分类名称" />
      </el-form-item>
      <el-form-item label="客户产品价格展示比例" >
        <el-input v-model="segm.rate" placeholder="请输入"/>
        <span>说明:该类型客户查看产品的价格比例</span>
      </el-form-item>
     </el-form>
    <!-- 取消和提交按钮 -->
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogVisible = false">
          取消
        </el-button>
        <el-button type="primary" @click="comit()">
          提交
        </el-button>
      </div>
    </template>
  </el-dialog>
  </div>
 
</template>

<script setup>
import { ref,onMounted } from 'vue';
import { findAllSegmentation,updateSegmentation } from "@/api/customer.ts";
import { Edit, } from '@element-plus/icons-vue'


//定义回调函数
onMounted(() => {
  initData();
})
//定义对话框的可视化
const dialogVisible = ref(false);

//编辑客户类型内容
function edit(data) {
  segm.value = data;
  // console.log(segm.value)
  dialogVisible.value = true;
  // console.log(data);
}
//定义查询条件
const segm = ref({});
//提交修改
async function comit() { 
  await updateSegmentation(JSON.stringify(segm.value));
  segm.value = {};
  initData();
  dialogVisible.value = false
}





//定义接收对象数据
const seg = ref([{}]);
//数据初始化--查所有
async function initData() { 
//能够得到条件
  // console.log(segm.value)
  const res =await findAllSegmentation(JSON.stringify(segm.value));
  seg.value = res.data;
  //看看值是否传到
  // console.log(seg.value)
}



</script>

<style scoped>




</style>
